<!--
  原来的前端，是没有《模块化》开发的
  ------------------------------

  到 NodeJS 出现后，才有的 模块化开发


  下面是： 为什么要使用模块
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <p>模块化 请看 aaa.js</p>

  <hr>

  <p>
    常见的模块化规范：核心：导出、导入 <br />
    &nbsp;&nbsp;CommonJS、AMD、CMD、也有ES6的modules <br>
    这些规范，需要 `模块加载器` 才能使用规范 <br>
    CommonJS 都有实现模块加载器 WebPack/NodeJS
  </p>

  <br>

  <!-- 引入代码顺序，会替换相同名问题 -->
  <script src="./main.js"></script>
  <script src="./aaa.js"></script>
  <script src="./bbb.js"></script>
  <script src="./mmm.js"></script>
  <script src="./nnn.js"></script>
  <script>

  </script>


  <!-- 一般开发，javascript是放到结尾，为了可观赏性，我把 规范 放到结尾了 -->
  <a href="https://segmentfault.com/a/1190000015991869">Js前端模块化规范</a>
  <p>
    CommonJS 规范: <br>
    具体的实现： Node的实现使用 -> CommonJS的规范 <br>
    &nbsp;&nbsp; WebPack的导出 用的CommonJS的规范 <br>
    核心：导出、导入 <br />
    导出: <br />
    <textarea cols="30" rows="10">
      module.exports = {
        flag: true,
        test(a, b) {
          return a + b
        },
        demo(a, b) {
          return a * b
        }
      }
    </textarea>
    <br>
    导入: <br />
    <textarea cols="60" rows="10">
      // require('文件路径 / 在项目根目录直接使用文件名')
      let {test, demo ,flag} = require('moduleA');

      //等同于
      let _mA =  require('moduleA');
      let test = _mA.test;
    </textarea>
  </p>

  <hr>
  <div>
    其他资料 <br>
    <ul>
      <li><a href="https://blog.csdn.net/pigg1989/article/details/80930680" target="_blank">CommonJS规范</a></li>
      <li><a href="http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html" target="_blank">AMD规范</a></li>
      <li><a href="https://www.cnblogs.com/LO-ME/p/10657774.html" target="_blank">CMD规范</a></li>
      <li><a href="https://www.jianshu.com/p/b502237695b3" target="_blank">ES6模块化规范</a></li>
      <br>
      <li><a href="https://www.cnblogs.com/dashnowords/p/9537315.html" target="_blank">umd： 适用于任何地方的 JavaScript 模块的 UMD（通用模块定义）模式。</a></li>
      <li> <a href="http://www.ecma-international.org/memento/TC39.htm" target="_blank"> umd 虽好，但是 现在 ES harmony 是最好的，最快的</a> &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.w3cschool.cn/zobyhd/48nutozt.html" target="_blank">W3C 中文</a></li>
    </ul>

    <br >
    <ul>
      <li><a href="http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html" target="_blank">浏览器加载 CommonJS 模块的原理与实现</a></li>
    </ul>
    <br ><br ><br ><br >
  </div>
</body>
</html>